<template>
  <view class="contacts-container">
    <view class="search-bar">
      <uni-search-bar v-model="keyword" placeholder="搜索姓名/手机号" @confirm="handleSearch" @cancel="handleCancel" />
    </view>
    <scroll-view scroll-y class="list" @scrolltolower="loadMore">
      <view v-for="item in list" :key="item.userId" class="row" @click="call(item)">
        <view class="avatar">{{ initials(item.nickName || item.userName) }}</view>
        <view class="info">
          <view class="name">{{ item.nickName || item.userName }}</view>
          <view class="mobile" v-if="item.phonenumber">{{ item.phonenumber }}</view>
          <view class="mobile" v-else>未填写手机号</view>
        </view>
        <view class="action" v-if="item.phonenumber">
          <uni-icons type="phone" size="22"></uni-icons>
        </view>
      </view>
      <uni-load-more :status="loadingStatus" :contentText="{contentdown: '上拉加载更多', contentrefresh: '正在加载...', contentnomore: '没有更多了'}" />
    </scroll-view>
  </view>
  
</template>

<script>
import { listUser } from '@/api/system/user'

export default {
  data() {
    return {
      keyword: '',
      list: [],
      pageNum: 1,
      pageSize: 20,
      total: 0,
      loading: false,
      finished: false,
    }
  },
  computed: {
    loadingStatus() {
      if (this.loading) return 'loading'
      return this.finished ? 'noMore' : 'more'
    }
  },
  onLoad() {
    this.fetchList(true)
  },
  methods: {
    fetchList(reset = false) {
      if (this.loading) return
      if (reset) {
        this.pageNum = 1
        this.finished = false
        this.list = []
      }
      this.loading = true
      const params = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        nickName: this.keyword,
        phonenumber: this.keyword
      }
      listUser(params).then(res => {
        const rows = res.rows || []
        this.total = res.total || 0
        this.list = this.list.concat(rows)
        this.finished = this.list.length >= this.total
      }).finally(() => {
        this.loading = false
      })
    },
    loadMore() {
      if (this.finished || this.loading) return
      this.pageNum += 1
      this.fetchList(false)
    },
    handleSearch() {
      this.fetchList(true)
    },
    handleCancel() {
      if (this.keyword) {
        this.keyword = ''
        this.fetchList(true)
      }
    },
    call(item) {
      if (!item.phonenumber) return
      uni.makePhoneCall({ phoneNumber: String(item.phonenumber) })
    },
    initials(name) {
      if (!name) return '友'
      return name.substring(0, 1)
    }
  }
}
</script>

<style lang="scss" scoped>
.contacts-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: #fff;
}
.search-bar {
  background: #fff;
}
.list {
  flex: 1;
}
.row {
  display: flex;
  align-items: center;
  padding: 12px 15px;
  border-bottom: 1px solid #f5f5f5;
}
.avatar {
  width: 36px;
  height: 36px;
  border-radius: 18px;
  background: #3c96f3;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
}
.info {
  flex: 1;
  .name { font-size: 15px; color: #333; }
  .mobile { font-size: 12px; color: #888; margin-top: 4px; }
}
.action {
  color: #3c96f3;
}
</style>



